<template>
    <view class="byCasting">
        <view class="kong" v-if="carList.length == 0">
            <view class="top_b">
                <view class="sel_b">
                    <view :class="[carList.length == 0 ? 'tou': '','txt_box hei']" @click="openCard" >
                        <text style="color: #222;">熔炉列表</text>
                        <image src="../../../static/syFactory/hei_xia.png" mode=""></image>
                    </view>
                </view>
                <view class="show_box" @click="showHe">
                    <image :src="isShowGou ? '../../../static/syFactory/lan_y.png' : '../../../static/syFactory/hui_y.png'" mode=""></image>
                    <text style="color: #222;">显示可熔炼</text>
                </view>
            </view>
            <image src="../../../static/syFactory/kong.svg" mode=""></image>
            <text>暂无可销毁卡</text>
        </view>
        <view class="card_Box" v-if="carList.length > 0">
            <image class="bg" src="../../../static/syFactory/zhu_bg.png" mode=""></image>
            <view class="top_b">
                <view class="sel_b">
                    <view :class="[carList.length == 0 ? 'tou': '','txt_box ']" @click="openCard">
                        <text>熔炉列表</text>
                        <image src="../../../static/syFactory/bai_xia.png" mode=""></image>
                    </view>
                </view>
                <view class="show_box" @click="showHe">
                    <image :src="isShowGou ? '../../../static/syFactory/lan_gou.png' : '../../../static/syFactory/hui_y.png'" mode=""></image>
                    <text>显示可熔炼</text>
                </view>
            </view>
            <view class="banner">
                <swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :current="bannerCurrent"
                    duration="500" @change="changeBanner">
                    <swiper-item v-for="(item,index) in carList">
                        <view class="imgBox">
                            <view class="imgArr">
                                <image class="b_kuan" src="../../../static/syFactory/b_kuan.png" mode=""></image>
                                <image class="z_img" :src="item.additionalValue" mode=""></image>
                            </view>
                            
                        </view>
                        <view class="bottom_img">
                            <image src="../../../static/syFactory/dian_three.png" mode=""></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="info_b" v-if="carList.length > 0">
            <view class="info_de">
                <view class="li_lable">
                	<view class="lable_item lable_xuanzhang" v-if="data.functionType==2">
                		<image src="/static/index/label04.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">勋章NFR</text>
                	</view>
                	<view class="lable_item lable_equity" v-if="data.functionType==1">
                		<image src="/static/index/quanyi.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">权益NFR</text>
                	</view>
                	<view class="lable_item lable_suanli" v-if="data.hashRate!=0">
                		<image src="/static/index/suanli.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">算力:{{data.hashRate}}</text>
                	</view>
                	<block v-if="equityCardTagList.length>0">
                		<!-- <view class="lable_item lable_grade" :style="{'backgroundImage': `url(${nav.img})`}" v-for="(nav,zIndex) in item.equityCardTagList" :key="zIndex">
                			<text class="lable_name ellipseHide">{{nav.name}}</text>
                		</view> -->
                		<view class="lable_grade_box" v-for="(nav,zIndex) in data.equityCardTagList" :key="zIndex">
                			<image :src="nav.img"  mode=""></image>
                			<view class="lable_item lable_grade">
                				<text class="lable_name ellipseHide">{{nav.name}}</text>
                			</view>
                		</view>
                	</block>
                	<!-- <view class="lable_item lable_grade">
                		<image src="/static/index/label03.png" mode="widthFix"></image>
                		<text class="lable_name ellipseHide">等级 SSR</text>
                	</view> -->
                </view>
                <view class="info_name">{{data.destroyEquityCardName}}</view>
                <view class="info_gx">
                    <image :src="data.issuerLogo ? data.issuerLogo : '../../../static/syFactory/gx_icon.png'" mode=""></image>
                    <text>{{data.issuerName}}</text>
                </view>
            </view>
            <view class="hava_box">
                <view class="left">持有数量：{{data.holdTotal}}</view>
                <view class="right">销毁奖励：{{data.award}}{{data.awardType == 1 ? '通分':'CoCo'}}</view>
            </view>
            <view class="cond_b" v-if="data.holdEquityCardList.length > 0">
                <view class="cond_lf">
                    <view class="xian"></view>
                    <text>请选择销毁卡编号</text>
                </view>
            </view>
            <view class="card_set" v-if="data.holdEquityCardList.length > 0">
                <view class="head_b">
                    <view class="sel_b">
                        <view class="allBox" @click="allSelect">
                            <image :src="isAll ? '../../../static/syFactory/xiao_y.png':'../../../static/syFactory/xiao_no.png'" mode=""></image>
                            <text>全选</text>
                        </view>
                        
                    </view>
                    <view class="no_b">
                        卡编号
                    </view>
                </view>
                <view class="table">
                    <view class="list" v-for="(item,index) in data.holdEquityCardList" @click="handleSelCard(item.id)">
                        <view class="sel_b">
                            <image :src="item.cardCurrent ? '../../../static/syFactory/xiao_y.png':'../../../static/syFactory/xiao_no.png'" mode=""></image>
                        </view>
                        <view class="no_b">
                            {{item.value}}
                        </view>
                    </view>
                    
                </view>
            </view>
            
        </view>
        <view class="btnBox" v-if="carList.length > 0 && isToken">
            <view class="btn" @click="openPay">立即销毁</view>
        </view>
        <view class="btnBox" v-if="!isToken">
            <view class="btn" @click="handleLogin">立即登录</view>
        </view>
        <DetailDialog ref="popupBox" :data='data'  v-if="popupBoxStatus" @determine="determine" @close='passwordClose' key='1'>
        </DetailDialog>
        <uni-popup ref="cardPopup" :animation="false" @maskClick="maskClick">
            <view class="cardBox" v-if="popopType == 'syntheticCard'"  @touchmove.prevent>
                <image class="pop_bg" src="../../../static/syFactory/pop_bg_1.png"></image>
                <view class="title">熔炉列表</view>
                <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper">
                    <view :class="[ bannerCurrent == index? 'active' : '','cardlist'] " v-for="(item,index) in carList" @click="handleCard(item.id,index)">
                        {{item.value}}
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import {
    	rsaEncrypt,
    } from '@/common/RSA.js' //加密js
    import DetailDialog from './components/DetailDialog.vue'
    import {
    	destroySelect,
        destroyDetail,
        payDestroy
    } from '@/api/api-v1-2.js'
    export default {
        components: {
        	DetailDialog,
        },
        data() {
            return {
                isShowGou: false,//显示可合成
                equityCardTagList: [],
                popupBoxStatus: false,
                data: {},
                carList: [],// 合成卡列表
                cardNumIndex: 0,
                cardCurrent: '',
                popopType: '',
                bannerCurrent: 0,
                isAll: false,//是否全选
                isToken: false,
            }
        },
        onLoad() {
            this.getCardList()
            
            var token = this.$queue.getData('token')
            console.log('token',token)
            if(token){
                this.isToken = true
            }else{
                this.isToken = false
            }   
        },
        onShow() {
          this.popupBoxStatus = false  
        },
        methods: {
            //切换轮播
            changeBanner(e){
                console.log(e)
                var id = this.carList[e.detail.current].id
                this.bannerCurrent = e.detail.current
                this.isAll = false
                this.getDetail(id)
                console.log('bannerCurrent',this.bannerCurrent)
            },
            //获取合成列表
            getCardList(){
                var data = {
                    isCanSmelting: this.isShowGou ? 1 : ''
                }
                destroySelect(data).then(res => {
                    console.log(res)
                    this.carList = res.result
                    console.log(this.carList[0].id)
                    this.getDetail(this.carList[0].id)
                })
                
            },
            // 获取详情
            getDetail(id){
                console.log('id',id)
                destroyDetail(id).then(res => {
                	console.log(res)
                	this.data = res.result
                    this.data.holdEquityCardList.forEach(aitem => {
                        aitem.cardCurrent = false
                    })
                })
            },
            //显示合成
            showHe(){
                this.isShowGou = !this.isShowGou
                this.bannerCurrent = 0
                this.carList = []
                this.getCardList()
            },
            //全选
            allSelect(){
                this.isAll = !this.isAll
                console.log('11111')
                this.data.holdEquityCardList = this.data.holdEquityCardList.map(item => {
                    if(this.isAll){
                        item.cardCurrent = true
                    }else{
                        item.cardCurrent = false
                    }
                    return item
                })
            },
            //选择卡
            handleCard(id,index){
                this.getDetail(id)
                this.closeCard()
                this.bannerCurrent = index
            },
            //去登陆
            handleLogin(){
                uni.showToast({
                    title:'请先登录',
                    icon: 'none'
                })
                setTimeout(() => {
                	uni.reLaunch({
                		url: '/pages/login/login'
                	})
                }, 1000)
            },
            // 立即合成
            openPay() {
                var isPay = true
                isPay = this.data.holdEquityCardList.some(item => item.cardCurrent == true)
                if(isPay){
                    this.popupBoxStatus = true
                }else{
                    uni.showToast({
                       title: '请选择销毁卡',
                       icon: 'none'
                    })
                }
            },
            passwordClose() {
            	this.popupBoxStatus = false
            },
            openCard() {
                if(this.carList.length == 0){
                    uni.showToast({
                        title: '暂无可销毁卡',
                        icon: 'none',
                    })
                }else{
                    this.popopType = 'syntheticCard'
                    this.$refs.cardPopup.open('center')
                }
                
            },
            closeCard() {
                this.$refs.cardPopup.close()
            },
            //选择销毁卡
            handleSelCard(id){
                // console.log(id)
                // console.log('this.cardNumIndex',this.data.castingMaterials[this.cardNumIndex])
                this.data.holdEquityCardList = this.data.holdEquityCardList.map(item => {
                    if(item.id == id){
                        if(item.cardCurrent){
                            item.cardCurrent = false
                        }else{
                            item.cardCurrent = true
                        }
                        this.judgeAll()
                    }
                    return item
                })
            },
            //判断是否已经全选
            judgeAll(){
                if(this.data.holdEquityCardList.findIndex((target) => target.cardCurrent === false) == -1){
                      this.isAll = true
                  }else {
                    this.isAll = false
                  }
            },
            // 确认支付
            async determine(e) {
            	uni.showLoading({
                    title:'加载中',
                    mask:true
                })
                var useEquityCardId = []
                console.log('合成卡数组',this.data.castingMaterials)
                this.data.holdEquityCardList.forEach(item => {
                    if(item.cardCurrent){
                        useEquityCardId.push(item.id)
                    }
                })
                console.log('useEquityCardId',useEquityCardId)
                var data = {
                    password: e,
                    id: this.data.id,
                    useEquityCardId: useEquityCardId
                }
                console.log('data',data)
                let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
                let params = {
                    encryptData: jiami
                }
                
                payDestroy(params).then(res => {
                    console.log(res)
                    uni.hideLoading()
                    this.popupBoxStatus = false
                    uni.showToast({
                        title: '销毁成功',
                        icon: 'none',
                    })
                    this.bannerCurrent = 0
                    this.getCardList()
                    this.isAll = false//是否全选
                }).catch(() => {
                        uni.hideLoading()
                        this.$refs.popupBox.password = ''
                })
            
            },
        }
    }
</script>

<style scoped>
page{
    background: #F7F8FA;
}
.byCasting{
    padding-bottom: 220rpx;
}
.card_Box{
    width: 100%;
    height: 776rpx;
    position: relative;
}
.card_Box .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.top_b{
    position: absolute;
    top: 0;
    left: 0;
    padding: 40rpx 40rpx 0 40rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}
.top_b .sel_b{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.top_b .sel_b .tou{
    opacity: 0.5;
}
.top_b .sel_b .hei{
    color: #222;
}
.top_b .sel_b .txt_box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.top_b .sel_b .txt_box text{
    font-size: 30rpx;
    color: #fff;
}
.top_b .sel_b .txt_box image{
    width: 18rpx;
    height: 10rpx;
    margin-left: 14rpx;
}
.top_b .show_box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.top_b .show_box text{
    font-size: 28rpx;
    color: #fff;
}
.top_b .show_box image{
    width: 28rpx;
    height: 28rpx;
    margin-right: 14rpx;
}
.banner {
    position: relative;
    padding-top: 110rpx;
}
.banner .swiper{
    height: 580rpx;
}
.banner .imgBox{
    width: 100%;
    height: 444rpx;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
    
}
.banner .imgBox .imgArr{
    position: relative;
    width: 630rpx;
    height: 444rpx;
}
.banner .imgBox .b_kuan{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.banner .imgBox .z_img{
    width: 630rpx;
    height: 444rpx;
    border-radius: 24rpx;
}
.banner .bottom_img{
    margin-top: 54rpx;
    width: 100%;
}
.banner .bottom_img image{
    width: 100%;
    height: 36rpx;
}
.info_b{
    border-radius: 30px 30px 0px 0px;
    width: 100%;
    margin-top: -70rpx;
    z-index: 99;
    background: #F7F8FA;
    position: relative;
    padding-bottom: 60rpx;
    

}
.info_de{
    padding: 40rpx;
}
.li_lable{
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* margin-top: 48rpx; */
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 22rpx;
    color: #FFFFFF;
}
.lable_item{
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    padding-left: 30rpx;
    padding-right: 10rpx;
    /* padding: 4rpx 10rpx 4rpx 26rpx; */
    box-sizing: border-box;
    min-width: 126rpx;
    max-width: 280rpx;
    height: 36rpx;
    margin-bottom: 20rpx;
    line-height: 36rpx;
}
.lable_item image{
    position: absolute;
}

.lable_xuanzhang image{
    top: -7rpx;
    left: -20rpx;
    width: 44rpx;
    height: 44rpx;
}
.lable_xuanzhang {
    margin-left: 10rpx;
    background: linear-gradient(90deg, #FF8540 4.62%, #FF4926 105.38%);
    border-radius: 0rpx 200rpx 200rpx 0rpx;
    /* background: url('/static/index/lable_bg01.png') no-repeat;
    background-size: 100% 100%; */
}
.lable_equity image{
    top: -6rpx;
    left: -23rpx;
    width: 44rpx;
    height: 44rpx;
}
.lable_equity {
    margin-left: 25rpx;
    /* background: url('/static/index/lable_bg02.png') no-repeat;
    background-size: 100% 100%; */
    background: linear-gradient(90deg, #5C4117 4.62%, #2D3332 105.38%);
    border-radius: 0rpx 200rpx 200rpx 0rpx;
}
.lable_grade_box{
    position: relative;
    margin-left: 16rpx;
    height: 38rpx;
}
.lable_grade_box image{
    width: 69px;
    height: 38rpx;
}
.lable_grade image{
    height: 36rpx;
    position: absolute;
    top: 0;
    /* top: -5rpx;
    left: -24rpx;
    width: 44rpx;
    height: 44rpx; */
}
.lable_grade {
    position: absolute;
    top: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 16rpx;
    /* background: url('/static/index/lable_bg03.png') no-repeat;
    background-size: 100% 100%; */
    /* background: linear-gradient(90deg, #D0A043 4.62%, #BA7D37 105.38%); */
    border-radius: 0rpx 200rpx 200rpx 0rpx;
}
.lable_suanli image{
    top: -5rpx;
    left: -24rpx;
    width: 44rpx;
    height: 44rpx;
}
.lable_suanli{
    margin-left: 36rpx;
    background: linear-gradient(90deg, #9D5AFF 4.62%, #4F56FF 105.38%);
    border-radius: 0rpx 200rpx 200rpx 0rpx;
}
.info_name{
    font-size: 40rpx;
    color: #222;
    margin-top: 20rpx;
}
.info_gx{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 12rpx;
}
.info_gx image{
    width: 44rpx;
    height: 44rpx;
    border-radius: 8rpx;
}
.info_gx  text{
    font-size: 28rpx;
    color: #222;
    margin-left: 8rpx;
}
.hava_box{
    width: 710rpx;
    height: 108rpx;
    border-radius: 24rpx;
    background: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
}
.hava_box .left{
    font-size: 32rpx;
    color: #222;
    font-weight: 600;
}

.hava_box .right{
    font-size: 32rpx;
    color: #FF3A3A;
    font-weight: 600;
}


.cond_b{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    margin-top: 40rpx;
}
.cond_lf{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.cond_lf .xian{
    width: 6rpx;
    height: 30rpx;
    background: linear-gradient(180deg, #0B87F2 0%, #6752EA 100%)
}
.cond_lf text{
    font-size: 32rpx;
    color: #222;
    margin-left: 10rpx;
}
.card_set{
    width: 690rpx;
    border-radius: 24rpx;
    background: #fff;
    margin: 40rpx auto 0 auto;
}
.card_set .head_b{
    width: 100%;
    height: 80rpx;
    border-bottom: 1rpx solid #D9D9D9;
    display: flex;
    justify-content: center;
}
.card_set .head_b .sel_b{
    border-right: 1rpx solid #D9D9D9;
}

.card_set .table{
    
}
.card_set .table .list:nth-last-child(1){
    border: none;
}
.card_set .table .list{
    width: 100%;
    height: 80rpx;
    border-bottom: 1rpx solid #D9D9D9;
    display: flex;
    justify-content: center;
}
.card_set .table .list view:nth-child(1){
    border-right: 1rpx solid #D9D9D9;
}
.card_set .sel_b{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card_set .sel_b .allBox{
    width: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card_set .sel_b image{
    width: 28rpx;
    height: 28rpx;
    margin-right: 8rpx;
}
.card_set .sel_b text{
    font-size: 30rpx;
    color: #222;
    font-weight: 500;
}
.card_set .no_b{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card_set .no_b text{
    font-size: 30rpx;
    color: #222;
    font-weight: 500;
}

.cardBox{
    width: 670rpx;
    max-height: 650rpx;
    border-radius: 40rpx;
    background: #fff;
    position: relative;
}
.cardBox .pop_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.cardBox .title{
    position: relative;
    width: 100%;
    height: 106rpx;
    font-size: 40rpx;
    text-align: center;
    line-height: 106rpx;
    color: #222;
    font-weight: 600;
}
.cardBox .scroll-Y {
    position: relative;
    max-height: 500rpx;
    width: 633rpx;
    border-radius: 24rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
}
.cardBox .cardlist{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #222222;
    font-weight: 500;
}
.cardBox .active{
    color: #0859F5 !important;
}
.cardNum_b{
    width: 100%;
    max-height: 600rpx;
    border-radius: 12rpx 12rpx 0 0;
    background: #fff;
    z-index: 999;
    position: relative;
}
.cardNum_b .scroll-Y {
    max-height: 600rpx;
}
.cardNum_l{
    width: 100%;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    color: #222222;
    font-weight: 500;
}
.cardNum_b .active{
    color: #007AFF !important;
}
.btnBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1rpx solid #E2E2E2;
    padding: 28rpx 0 40rpx 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    background: #fff;
}
.btn{
    width: 690rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
    border-radius: 6px;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 36rpx;
}
.kong{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 320rpx;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    
}
.kong image{
    width: 480rpx;
    height: 262rpx;
}
.kong text{
    font-size: 28rpx;
    color: #999;
    font-size: 28rpx;
}
</style>








